<style lang="less">
  .ivu-poptip-rel{
    width: 100%;
  }
  .tem-card .ivu-form-item{
    margin-bottom: 24px;
  }
  .ivu-input-number{
    width: 100%;
  }
</style>
<template>
  <div class="tem-div">
    <Card class="tem-card" style="text-align:right">
          <Button type="primary" :loading="actionLoading" @click="addOrUp('form')">保存</Button>
          <Button type="ghost" style="margin-left: 8px">取消</Button>
    </Card>
    <Card class="tem-card">
      <Collapse  v-model="value1">
        <Panel name="1">
            基本信息
            <div slot="content">
              <Form ref="form" :model="formData" :rules="ruleValidate" label-position="right" :label-width="100">
                <Row  type="flex" justify="space-around">
                    <Col span="11">
                      <FormItem label="">
                        <RadioGroup v-model="formData.isheadstock">
                            <Radio label="1">一体车（牵引车头）</Radio>
                            <Radio label="2">挂车</Radio>
                        </RadioGroup>
                      </FormItem>
                      <!--  -->
                      <FormItem label="车牌号" prop="carnum">
                          <i-input v-model="formData.carnum"></i-input>
                      </FormItem>

                      <FormItem label="所属机构">
                           <Poptip placement="bottom" v-model="showPoptip" style="width: 100%;">
                            <Input ref="pId" v-model="formData.orgname" @on-focus="handlerFocus" placeholder="请选择所属机构"></Input>
                            <div class="api" ref="tree" slot="content" style="text-align: left;">
                              <Tree :data="orgTree" @on-select-change="handleSelectTree"></Tree>
                            </div>
                          </Poptip>
                      </FormItem>

                      <FormItem label="使用部门">
                          <i-input v-model="formData.usedept"></i-input>
                      </FormItem>

                      <FormItem label="车辆业务类型">
                          <Select placeholder="车辆业务类型" v-model="formData.businessType">
                              <Option v-for="item in businessTypeArray" :value="item.label" :key="item.label">{{item.label}}</Option>
                          </Select>
                      </FormItem>

                      <FormItem label="厢型">
                          <i-select placeholder="厢型" v-model="formData.carriagetype">
                            <i-option v-for="item in carriagetypeArray" :value="item.label" :key="item.label">{{item.label}}</i-option>
                          </i-select>
                      </FormItem>

                      <FormItem label="额定载重">
                          <i-input v-model="formData.weight"><span slot="append">吨</span></i-input>
                      </FormItem>

                      <!-- 一体车（牵引车头）开始 -->
                      <FormItem label="百公里参考油耗"  v-if="this.formData.isheadstock !== '2'">
                          <i-input v-model="formData.oilrefer">
                            <span slot="append">升/百公里</span>
                          </i-input>
                      </FormItem>
                      <FormItem label="里程因子"  v-if="this.formData.isheadstock !== '2'">
                          <i-input v-model="formData.mileageFactor"></i-input>
                      </FormItem>
                      <FormItem label="主驾司机"  v-if="this.formData.isheadstock !== '2'">
                          <!-- <i-input v-model="formData.mainDriverId"></i-input> -->
                          <Select
                              v-model="formData.mainDriverId"
                              filterable
                              remote
                              :remote-method="remoteDriver"
                              :loading="actionLoading">
                              <Option v-for="(option, index) in driverOptions" :value="option.value" :key="index">{{option.label}}</Option>
                          </Select>
                      </FormItem>
                      <FormItem label="副驾司机"  v-if="this.formData.isheadstock !== '2'">
                          <i-input v-model="formData.depDriverId"></i-input>
                      </FormItem>
                      <!-- 一体车（牵引车头）结束 -->
                      <FormItem label="轮胎数量">
                          <i-select placeholder="轮胎数量" v-model="formData.tyreNumber">
                            <i-option v-for="item in tyreNumberArray"  :value="item.value" :key="item.label">{{item.label}}</i-option>
                          </i-select>
                      </FormItem>
                      <!-- 挂车 -->
                      <FormItem label="轴距" v-if="this.formData.isheadstock === '2'">
                          <i-input v-model="formData.axleDistance"></i-input>
                      </FormItem>
                      <FormItem label="轴荷" v-if="this.formData.isheadstock === '2'">
                          <i-input v-model="formData.axleLoad"></i-input>
                      </FormItem>
                      <FormItem label="牵引销最大静" v-if="this.formData.isheadstock === '2'">
                          <i-input v-model="formData.staticLoad"></i-input>
                      </FormItem>
                      <FormItem label="车挂车型">
                          <i-select placeholder="车挂车型" v-model="formData.hangingType">
                            <i-option v-for="item in hangingTypeArray"  :value="item.label" :key="item.label">{{item.label}}</i-option>
                          </i-select>
                      </FormItem>
                      <FormItem label="牵引车型号">
                          <i-input v-model="formData.tractorType"></i-input>
                      </FormItem>
                      <FormItem label="品牌">
                          <i-input v-model="formData.brand"></i-input>
                      </FormItem>
                      <FormItem label="排放标准">
                          <i-input v-model="formData.emissionStandard"></i-input>
                      </FormItem>
                      <FormItem label="型号">
                          <i-input v-model="formData.carType"></i-input>
                      </FormItem>
                    </Col>
                    <Col span="11">
                      <FormItem style="height:32.89px"></FormItem>
                      <FormItem label="车辆别名">
                          <i-input v-model="formData.carAlias"></i-input>
                      </FormItem>

                      <FormItem label="车队">
                          <i-input v-model="formData.motorcade"></i-input>
                      </FormItem>

                      <FormItem label="挂车类型">
                          <i-select placeholder="挂车类型" v-model="formData.usetype">
                            <i-option v-for="item in usetypeArray"  :value="item.label" :key="item.label">{{item.label}}</i-option>
                          </i-select>
                      </FormItem>

                      <FormItem label="车长">
                          <i-input v-model="formData.length"><span slot="append">米</span></i-input>
                      </FormItem>

                      <FormItem label="额定体积">
                          <i-input v-model="formData.volume"><span slot="append">立方</span></i-input>
                      </FormItem>

                      <FormItem label="车厢尺寸">
                          <Row>
                            <Col span="6">
                                <i-input placeholder="车厢长" v-model="formData.carriagelen">
                                  <span slot="append">米</span>
                                </i-input>
                            </Col>
                            <Col span="3" style="text-align: center">X</Col>
                            <Col span="6">
                                <i-input placeholder="车厢宽" v-model="formData.carriagewidth"><span slot="append">米</span></i-input>
                            </Col>
                            <Col span="3" style="text-align: center">X</Col>
                            <Col span="6">
                                <i-input placeholder="车厢高" v-model="formData.carriageheight"><span slot="append">米</span></i-input>
                            </Col>
                        </Row>
                      </FormItem>
                      <FormItem label="出厂日期">
                          <DatePicker type="date" style="width:100%;" placeholder="出厂日期" v-model="formData.productionDate"></DatePicker>
                      </FormItem>
                      <!-- 一体车（牵引车头） -->
                      <FormItem label="油耗因子" v-if="this.formData.isheadstock !== '2'">
                          <i-input v-model="formData.scalingFactor"></i-input>
                      </FormItem>
                      <FormItem label="主驾手机号" v-if="this.formData.isheadstock !== '2'">
                          <i-input v-model="formData.mainDriverPhone" readonly  icon="ios-telephone-outline"></i-input>
                      </FormItem>
                      <FormItem label="副驾手机号" v-if="this.formData.isheadstock !== '2'">
                          <i-input v-model="formData.depDriverPhone"  readonly icon="ios-telephone-outline"></i-input>
                      </FormItem>
                      <!-- 挂车 -->
                      <FormItem label="轮胎规格" v-if="this.formData.isheadstock === '2'">
                          <i-input v-model="formData.tyreSpec"></i-input>
                      </FormItem>
                      <FormItem label="后轮距" v-if="this.formData.isheadstock === '2'">
                          <i-input v-model="formData.rearWheelDistance"></i-input>
                      </FormItem>
                      <FormItem label="接近角 / 离去角" v-if="this.formData.isheadstock === '2'">
                           <Row>
                            <Col span="11">
                                <InputNumber placeholder="接近角" v-model="formData.approach"></InputNumber>
                            </Col>
                            <Col span="2" style="text-align: center">/</Col>
                            <Col span="11">
                                <InputNumber placeholder="离去角" v-model="formData.departure"></InputNumber>
                            </Col>
                        </Row>
                      </FormItem>

                      <FormItem label="GPS设备号">
                          <i-input v-model="formData.gpsno"></i-input>
                      </FormItem>

                      <FormItem label="车宽">
                          <i-input v-model="formData.width"></i-input>
                      </FormItem>

                      <FormItem label="车轴">
                          <i-select placeholder="车轴" v-model="formData.axleNumber">
                            <i-option v-for="item in axleNumberArray"  :value="item.label" :key="item.label">{{item.label}}</i-option>
                          </i-select>
                      </FormItem>

                      <FormItem label="颜色">
                          <i-input v-model="formData.carColor"></i-input>
                      </FormItem>

                      <FormItem label="联营车辆公司">
                          <i-input v-model="formData.joinCompany"></i-input>
                      </FormItem>

                      <FormItem label="租赁车辆公司">
                          <i-input v-model="formData.rentalCompany"></i-input>
                      </FormItem>
                    </Col>
                </Row>
              </Form>
            </div>
        </Panel>
      </Collapse>
    </Card>
    <Card class="tem-card" style="text-align:right">
          <Button type="primary" :loading="actionLoading" @click="addOrUp('form')">保存</Button>
          <Button type="ghost" style="margin-left: 8px">取消</Button>
    </Card>
  </div>
</template>
<script>
  import fetch from './../service';
  import orgService from '@/page/main/userManage/org/service';
  export default {
    components: {
    },
    data () {
      return {
        loading: false,
        actionLoading: false,
        value1: 1,
        // 查询条件
        searchObj: {
        },
        showPoptip: false,
        // 车辆业务类型
        businessTypeArray: [
          {
            value: '1',
            label: '自营'
          },
          {
            value: '2',
            label: '连营'
          },
          {
            value: '3',
            label: '租用'
          }
        ],
        // 厢型
        carriagetypeArray: [
          {
            value: '1',
            label: '牵引车'
          },
          {
            value: '2',
            label: '低栏车'
          },
          {
            value: '3',
            label: '中栏车'
          },
          {
            value: '4',
            label: '高栏车'
          },
          {
            value: '5',
            label: '中巴车'
          },
          {
            value: '6',
            label: '平板车'
          },
          {
            value: '7',
            label: '厢式车'
          },
          {
            value: '8',
            label: '冷藏车'
          },
          {
            value: '9',
            label: '集装箱'
          },
          {
            value: '10',
            label: '超宽车'
          },
          {
            value: '11',
            label: '蓬车'
          },
          {
            value: '12',
            label: '其它车型'
          },
          {
            value: '13',
            label: '罐式车'
          },
          {
            value: '14',
            label: '高低板车'
          },
          {
            value: '15',
            label: '危险品车'
          },
          {
            value: '16',
            label: '自卸货车'
          }
        ],
        // 轮胎数量
        tyreNumberArray: [
          {
            value: '4',
            label: '4'
          },
          {
            value: '6',
            label: '6'
          },
          {
            value: '8',
            label: '8'
          },
          {
            value: '10',
            label: '10'
          },
          {
            value: '12',
            label: '12'
          },
          {
            value: '14',
            label: '14'
          },
          {
            value: '16',
            label: '16'
          },
          {
            value: '18',
            label: '18'
          },
          {
            value: '20',
            label: '20'
          },
          {
            value: '22',
            label: '22'
          },
          {
            value: '24',
            label: '24'
          }
        ],
        // 车挂车型
        hangingTypeArray: [
          {
            value: '1',
            label: '标车'
          },
          {
            value: '2',
            label: '新标'
          },
          {
            value: '3',
            label: 'T型车'
          },
          {
            value: '4',
            label: '六位车'
          },
          {
            value: '5',
            label: '中置轴'
          }
        ],
        // 挂车类型
        usetypeArray: [
          {
            value: '1',
            label: '6位标'
          },
          {
            value: '2',
            label: '12位标'
          },
          {
            value: '3',
            label: '13位标'
          },
          {
            value: '4',
            label: '16位标'
          },
          {
            value: '5',
            label: '18位T'
          },
          {
            value: '6',
            label: '21位T'
          }
        ],
        // 车轴
        axleNumberArray: [
           {
            value: '1',
            label: '四轴'
          },
          {
            value: '2',
            label: '五轴'
          },
          {
            value: '3',
            label: '六轴'
          }
        ],
        formData: {
          // isheadstock: 2
          // carnum: ''
          // orgId: '',
          // orgName: '',
          // usedept: '',
          // businessType: '自营',
          // carriageType: '低栏车',
          // weight: '',
          // oilrefer: '',
          // mainDriverId: '',
          // depDriverId: '',
          // hangingType: '标车',
          // tyreNumber: '4'
          // brand: '',
          // carAlias: '',
          // motorcade: '',
          // length: '',
          // volume: '',
          // carriagelen: '',
          // carriagewidth: '',
          // carriageheight: '',
          // gpsno: '',
          // axleNumber: ''
        },
        ruleValidate: {
          carnum: [
            {required: false, message: '车牌号不能为空', trigger: 'blur'},
            {max: 40, message: '用户名不能超过40个字符且不包含空格', trigger: 'blur'}
          ]
          // password: [
          //   {required: true, message: '密码不能为空', trigger: 'blur'},
          //   {max: 20, message: '密码不能超过20个字符且不包含空格', trigger: 'blur'}
          // ],
          // name: [
          //   {required: true, message: '姓名不能为空', trigger: 'blur'}
          // ],
          // phone: [
          //   {required: true, message: '手机号不能为空', trigger: 'blur'},
          //   {pattern: '^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\\d{8}$', message: '手机号格式不正确', trigger: 'blur'}
          // ],
          // email: [
          //   {pattern: '^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\\.[a-zA-Z0-9_-]{2,3}){1,2})$', message: '邮箱格式不正确', trigger: 'blur'}
          // ],
          // status: [
          //   {required: true, type: 'number', message: '性别不能为空', trigger: 'blur change'}
          // ],
          // orgName: [
          //   {required: true, message: '所属机构不能为空', trigger: 'blur'}
          // ]
        },
        orgTree: [],
        driverOptions: [],
        list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']
      };
    },
    created () {
      // 初始化加载机构树
      this.init();
      // 初始化机构树
      this.getOrgTree();
    },
    methods: {
      init () {
        this.formData.id = this.$route.query.id;
        console.log('carId', this.formData.id);
        if (this.formData.id !== undefined && this.formData.id !== '') {
            this.getById(this.formData.id);
        }
      },
      getById (carId) {
        fetch.getOne({id: carId}).then((result) => {
          // this.modalFormItem[0].property.disabled = true;
          // this.modalFormItem[1].property.disabled = true;
          this.formData = result.data;
          this.formData.isheadstock = this.formData.isheadstock.toString();
          // this.formData.isheadstock = '1';
          console.log('获取formData', this.formData);
        });
      },
      getOrgTree () {
        // 获取机构树
        let opt = {id: 1};
        orgService.getTree(opt).then((result) => {
          // 展开父级节点
          this.$set(result.data, 'expand', true);
          this.orgTree = [result.data];
        });
      },
      addOrUp (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.actionLoading = true;
            console.log('提交formData', this.formData);
            try {
              if (this.formData.id !== undefined && this.formData.id !== '') {
                let opt = {id: this.formData.id};
                fetch.updateApi(opt, this.formData).then((data) => {
                  this.$Notice.success({
                    title: '修改成功'
                  });
                });
              } else {
                fetch.saveApi(this.formData).then((data) => {
                  this.$Notice.success({
                    title: '新增成功'
                  });
                });
              }
            } catch (e) {}
            this.actionLoading = false;
          }
        });
      },
      // 一体车/挂车切换
      handlerRadioChange () {
      },
      // 司机搜索
      remoteDriver (query) {
        if (query !== '') {
            this.actionLoading = true;
            setTimeout(() => {
                this.actionLoading = false;
                const list = this.list.map(item => {
                    return {
                        value: item,
                        label: item
                    };
                });
                this.driverOptions = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
            }, 200);
        } else {
            this.driverOptions = [];
        }
      },
      handlerFocus () {
        // 获取父级节点文本框宽度
        let inputWidth = this.$refs.pId.$el.offsetWidth;
        // 设置树div宽度
        this.$refs.tree.style.width = inputWidth - 32 + 'px';
      },
      handleSelectTree (node) {
        this.formData.orgname = node[0].title;
        this.formData.orgId = node[0].id;
        // this.$refs.form.validateField('orgName');
        this.showPoptip = false;
      }
    }
  };
</script>
